{% extends "base.html" %}{% block title %}{{ track.title }} · {{ app_name }}{% endblock %}
{% block body %}
<div id="tr-dim" hidden></div>

<section class="card" id="tr-pre">
  <h1>🎧 {{ track.title }}</h1>
  <p class="hint">A recorded track · {{ track.seconds|dur }}{% if track.note %} · {{ track.note }}{% endif %}</p>

  {#- 🔴 Said before Start, not buried in the guide: this is the one thing in the module
      the app cannot read. A score is ~2 KB of JSON checked before a tone sounds; a track
      is somebody's voice for as long as it runs, and nothing here knows what it says. -#}
  {% if track.kind == 'mantra' %}
  <p class="hint">Today's mantra, rendered on this box by your voice from the Handler's library.
    Played to the end, it counts as recited.</p>
  {% if track.slot == 'bed' %}
  <p class="hint">🌙 This one settles and fades to silence. It won't start with <em>in gear</em>
    ticked.{% if wake %} In restrictive gear, <a href="/trance/track/{{ wake.slug }}">play the wake one</a>.{% endif %}</p>
  {% endif %}
  {% else %}
  <p class="hint">
    Latch can't hear what's in this file. It plays it, times it and keeps the record, and
    that's all. You chose to put it here, and you can stop it the same way as any sit.
  </p>
  {% endif %}

  <p class="row"><label for="tr-vol">Volume</label>
    <input type="range" id="tr-vol" min="0" max="100" value="{{ volume }}">
    <output id="tr-volout">{{ volume }}</output>
  </p>

  <p class="row">
    <label class="chip"><input type="checkbox" id="tr-gear"> in gear</label>
    <label class="chip"><input type="checkbox" id="tr-hands" checked> hands free</label>
    <label class="chip"><input type="checkbox" id="tr-chime" {{ 'checked' if chime }}> chime when it ends</label>
  </p>
  <p class="hint">Without the chime, the track ends in silence. If the recording is made to
    fade you into sleep, that's what it'll do.</p>

  <p><button class="btn primary" type="button" id="tr-start">Start →</button>
     <a class="btn" href="/trance">back</a>
     <a class="hint" href="/settings#trance" title="Trance settings">⚙</a></p>
  <p class="hint" id="tr-err" hidden></p>

  <p class="hint">Long-press anywhere for about a second to stop. You'll hear a short tone
    halfway through the press so you know it registered. The pause button on the lock screen
    stops it too.</p>
</section>

<section id="tr-run" hidden>
  <div class="tr-stage">
    <p class="tr-seg">{{ track.title }}</p>
    <p id="tr-left" class="tr-left"></p>
    <p class="hint tr-fade" id="tr-hint">long-press anywhere to stop</p>
  </div>
</section>

<audio id="tr-audio" preload="auto" src="/trance/track/{{ track.slug }}/audio"></audio>
{% endblock %}

{% block scripts %}
<script type="application/json" id="tr-boot">{{ {"slug": track.slug, "title": track.title, "seconds": track.seconds}|tojson }}</script>
<script src="/static/trance-track.js"></script>
{% endblock %}